<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="250px" background-color="#545c64">
      <el-header class="aside_header">后台管理系统</el-header>
      <el-menu
        ref="asideMenu"
        text-color="#fff"
        background-color="#545c64"
        v-for="item in viewList"
        :key="item.index"
      >
        <el-submenu :index="item.name">
          <template slot="title">
            <i class="el-icon-star-on"></i>
            {{ item.name }}
          </template>
          <el-menu-item-group v-for="childItem in item.childList" :key="childItem.index">
            <el-menu-item :index="childItem.name" v-on:click="menuSelect(childItem)">
              <i class="el-icon-star-off"></i>
              {{ childItem.name }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          :type="tag.type"
          closable
          @click="clickTag(tag.name)"
          @close="handleClose(tag)"
          style="cursor: pointer;margin-bottom: 15px;"
          v-bind:class="{ tag: selectName == tag.name  }"
        >{{tag.name}}</el-tag>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  overflow: visible;
}
.el-menu-item-group__title {
  padding: 0px;
}
.aside_header {
  text-align: center;
  font-size: 23px;
  background-color: #259de7;
  color: #ffffff;
}
.el-menu-item {
  font-size: 13px;
}
.tag {
  border-bottom: none;
  color: "#C6E2FE";
  background-color: white;
}
</style>

<script>

export default {
  data () {
    const selectName = ''
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    const viewList = [
      {
        index: 1,
        name: '信息管理',
        childList: [
          {
            index: 1,
            name: '信息查询',
            path: '/search'
          },
          {
            index: 2,
            name: '信息修改',
            path: '/modify'
          },
          {
            index: 3,
            name: '系统信息'
          }]
      },
      {
        index: 2,
        name: '项目管理',
        childList: [
          {
            index: 1,
            name: '后端项目'
          },
          {
            index: 2,
            name: '前端项目'
          }]
      },
      {
        index: 3,
        name: '管理员',
        childList: [
          {
            index: 1,
            name: '权限管理',
            path: '/priviate'
          },
          {
            index: 2,
            name: '自定义'
          }]
      }]
    const tags = []
    return {
      tableData: Array(20).fill(item),
      viewList,
      tags,
      selectName
    }
  },
  beforeCreate () {
  },
  mounted () {
    const path = this.$router.currentRoute.fullPath
    for (const i in this.viewList) {
      for (const c in this.viewList[i].childList) {
        if (this.viewList[i].childList[c].path === path) {
          this.$router.push(path).catch(() => { })
          this.selectName = this.viewList[i].childList[c].name
          this.tags.push({ name: this.selectName })
          this.$refs.asideMenu[i].open(this.viewList[i].name)
        }
      }
    }
  },
  watch: {
    $route (to, from) {
      const changeTag = (viewList) => {
        if (viewList) {
          for (const item of viewList) {
            if (item.path === to.fullPath) {
              this.selectName = item.name
              for (const tag of this.tags) {
                if (tag.name === this.selectName) {
                  return
                }
              }
              this.tags.push({ name: this.selectName })
            } else {
              changeTag(item.childList)
            }
          }
        }
      }
      changeTag(this.viewList)
    }
  },
  methods: {
    menuSelect ({ name, path }) {
      this.changeRouterByName(name)
    },
    async handleClose (tag) {
      this.tags.pop()
      if (this.tags.length > 0) {
        this.$router.go(-1)
      } else {
        this.$router.push('/')
      }
    },
    clickTag (name) {
      this.changeRouterByName(name)
    },
    changeRouterByName (name) {
      for (const i in this.viewList) {
        for (const c in this.viewList[i].childList) {
          if (this.viewList[i].childList[c].name === name) {
            this.$router.push(this.viewList[i].childList[c].path).catch(() => { })
          }
        }
      }
    }
  }
}
</script>
